<template>
  <div style="">
    <Header :left="true" leftText="返回" title="异常让步质量申请审核"></Header>
    <van-tabs type="card" :offset-top="80" :sticky="true" @change="tabChange" swipeable="true"
      style="top: 8px; font-size: 15px" color="#1c6c8d">
      <!-- 未确认页面 -->
      <van-tab title="未审核" style="font-size: 15px">
        <div class="textScroll">
          <!-- 循环数据开始 -->
          <div v-for="(item, index) in itemsOne" :key="item.Id" style="position: relative">
            <div style="width: 100%; background-color: #f3f4f8; height: 5px">
              <span></span>
            </div>
            <div class="divStyle">
              <van-row style="margin-left: 10px; margin-top: 10px" v-show="false">
                <van-col span="6"><b>id:</b></van-col>
                <van-col span="14">{{ item.Id }}</van-col>
              </van-row>


              <van-row style="margin-left: 10px; margin-top: 10px">
                <van-col span="6"><b>设备代码:</b></van-col>
                <van-col span="14">{{ item.MachineID }}</van-col>
              </van-row>

              <van-row style="margin-left: 10px; margin-top: 10px">
                <van-col span="6"><b>班次:</b></van-col>
                <van-col span="14">{{ shiftMap[item.PShiftID] }}</van-col>
              </van-row>
              <van-row style="margin-left: 10px; margin-top: 10px">
                <van-col span="6"><b>订单号:</b></van-col>
                <van-col span="14">{{ item.POrderID }}</van-col>
              </van-row>

              <van-row style="margin-left: 10px; margin-top: 10px">
                <van-col span="6"><b>物料名称:</b></van-col>
                <van-col span="14">{{ item.MaterialName }}</van-col>
              </van-row>

              <van-row style="margin-left: 10px; margin-top: 10px;padding-bottom: 10px;">
                <van-col span="6"><b>异常发生时间:</b></van-col>
                <van-col span="14">{{ item.OccurDatetime }}</van-col>
                <van-col span="2">
                  <van-button color="#138087" @click="toAudit(item)" style="
                      width: 85px;
                      height: 40px;
                      font-size: 12px;
                      position: absolute;
                      left: 70%;
                    " type="primary" text="审核" />
                </van-col>
              </van-row>
              <van-row style="
                  margin-left: 10px;
                  margin-top: 10px;
                  border-bottom: 2px solid rgba(82, 76, 76, 0.39);
                ">
                <van-col span="6"> </van-col>
                <van-col span="3"> </van-col>
                <van-col span="6"> </van-col>
              </van-row>
            </div>
          </div>
          <!-- 循环数据结束 -->
          <!-- <van-empty v-if="itemsOne == ''" image="search" description="暂无数据" /> -->
        </div>
      </van-tab>
      <!-- 已确认页面 -->
      <van-tab title="已审核">
        <div class="textScroll2">
          <!-- 循环数据开始 -->
          <div v-for="(item, index) in itemsTwo" :key="item.Id" style="position: relative">
            <div style="width: 100%; background-color: #f3f4f8; height: 5px">
              <span></span>
            </div>
            <div class="divStyle">
              <van-row style="margin-left: 10px; margin-top: 10px" v-show="false">
                <van-col span="6"><b>id:</b></van-col>
                <van-col span="14">{{ item.Id }}</van-col>
              </van-row>


              <van-row style="margin-left: 10px; margin-top: 10px">
                <van-col span="6"><b>设备代码:</b></van-col>
                <van-col span="14">{{ item.MachineID }}</van-col>
              </van-row>

              <van-row style="margin-left: 10px; margin-top: 10px">
                <van-col span="6"><b>班次:</b></van-col>
                <van-col span="14">{{ shiftMap[item.PShiftID] }}</van-col>
              </van-row>
              <van-row style="margin-left: 10px; margin-top: 10px">
                <van-col span="6"><b>订单号:</b></van-col>
                <van-col span="14">{{ item.POrderID }}</van-col>
              </van-row>

              <van-row style="margin-left: 10px; margin-top: 10px">
                <van-col span="6"><b>物料名称:</b></van-col>
                <van-col span="14">{{ item.MaterialName }}</van-col>
              </van-row>

              <van-row style="margin-left: 10px; margin-top: 10px;padding-bottom: 10px;">
                <van-col span="6"><b>异常发生时间:</b></van-col>
                <van-col span="14">{{ item.OccurDatetime }}</van-col>
                <van-col span="2">
                  <van-button color="#138087" @click="toAudit(item, true)" style="
                      width: 85px;
                      height: 40px;
                      font-size: 12px;
                      position: absolute;
                      left: 70%;
                    " type="primary" text="查看" />
                </van-col>
              </van-row>
              <van-row style="
                  margin-left: 10px;
                  margin-top: 10px;
                  border-bottom: 2px solid rgba(82, 76, 76, 0.39);
                ">
                <van-col span="6"> </van-col>
                <van-col span="3"> </van-col>
                <van-col span="6"> </van-col>
              </van-row>
            </div>

          </div>
          <!-- 循环数据结束 -->
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
  
<script>
import {
  Col,
  Row,
  Form,
  Cell,
  Icon,
  Field,
  tab,
  tabs,
  NumberKeyboard,
  Image as VanImage,
  Picker,
  popup,
  SubmitBar,
  Button,
  Loading,
  Overlay,
  Dialog,
  Toast,
  NoticeBar,
  Tag,
  DatetimePicker,
  ImagePreview,
  CellGroup,
  Uploader,
  Cascader,
  Calendar,
  RadioGroup,
  Radio,
  Divider,
  Stepper,
  AddressList,
  Checkbox,
  CheckboxGroup,
} from "vant";

import "vue-easytable/libs/themes-base/index.css";
import { VTable } from "vue-easytable";
import { _httpClient } from "@/libs/apisie";
import { _httpClient as _httpClientApi } from "@/libs/api";
import { _httpClient as _httpClientApisie } from "@/libs/apisie";
import { getToken, getBaseApiFrefix } from "@/libs/auth";
import Header from "@/components/header.vue";
import { storage } from "@/libs/utils";

Vue.use(Form);
Vue.use(Field);
Vue.use(Overlay);
Vue.use(Loading);
Vue.use(Picker);
Vue.use(popup);
Vue.use(SubmitBar);
Vue.use(VanImage);
Vue.use(DatetimePicker);
Vue.use(Cascader);
Vue.use(Calendar);
Vue.use(Cell);
Vue.use(RadioGroup);
Vue.use(Radio);
Vue.use(Divider);
Vue.use(Stepper);
Vue.use(Button);
Vue.use(AddressList);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Col);
Vue.use(Row);
Vue.use(tab);
Vue.use(tabs);

export default {
  name: "abnormalconcessionZLlist",
  components: {
    Form,
    Row,
    Col,
    Button,
    Header,
    Form,
    Cell,
    Icon,
    Field,
    NumberKeyboard,
    Dialog,
    Toast,
    NoticeBar,
    Row,
    Tag,
    popup,
    DatetimePicker,
    ImagePreview,
    CellGroup,
    Uploader,
    Col,
    Calendar,
    Cascader,
    Picker,
    RadioGroup,
    Radio,
    Divider,
    Stepper,
    VTable,
    AddressList,
    Checkbox,
    CheckboxGroup,
    tab,
    tabs,
  },

  data() {
    return {
      form: [],
      itemsOne: [],
      itemsTwo: [],
      shiftMap: {},
      preCheck: false,
      item: null,

    };
  },

  created: function () {
    //获取当前系统登录用户
    this.user = JSON.parse(storage.get("user"));
    this.user.userId = this.user.userName;
    this.getList();
    this.item = api.pageParam.item
    this.$ac.addEventListener({
      name: 'ab-zl'
    }, (ret, err) => {
      this.getList()

    });

  },
  mounted() { },

  methods: {

    async getAllShift(fid) {

      try {
        let res = await _httpClient.get(
          _httpClient.getApiPrefix() +
          "/ProductionShift/GetList?FactoryID=" +
          fid
        );

        if (res.HttpCode === "200") {
          for (let i = 0; i < res.Data.length; i++) {
            this.$set(this.shiftMap, res.Data[i].PShiftID, res.Data[i].PShiftName)
          }
        }

      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },

    async getList() {
      let _this = this;
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "Loading...",
      });
      try {
        let res = await _httpClientApisie.get(
          _httpClientApisie.getApiPrefix() +
          "/ProductionCompromiseRequest/GetList?AbnormalTypeID=AT02AT03AT04&PrdChecked=" + this.preCheck
        );
        Toast.clear();
        if (res.Data.length > 0) {
          this.getAllShift(res.Data[0].FactoryID)
        }



        if (this.preCheck) {
          _this.itemsTwo = res.Data
        } else {
          _this.itemsOne = res.Data;
        }



      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
    toAudit(id, lock = false) {

      // if(!lock){
      //     if(id.POrderID!==this.item.POrderID){
      //       Toast.clear()
      //       Toast.fail("请先完成"+this.item.POrderID+"对应的审核")
      //          return
      //     }

      //   }
      let _this = this;
      this.$ac.openWin({
        name: "abnormalconcessionAduit",
        url: "./tightenup-abnormalconcessionAduit.html",
        pageParam: {
          id: id.Id,
          type: "02",
          lock: lock,
          item: _this.item
        },
        reload: true,
      });
      setTimeout(function () {
        _this.$ac.closeWin();
      }, 2000);
    },
    tabChange(name, title) {
      this.preCheck = !this.preCheck
      if (!this.preCheck) {
        this.itemsOne = [];
        //查询未审核信息
      } else if (name == 1) {
        //查询已审核信息
        this.itemsTwo = [];
      }
      this.getList()
    },
  },
};
</script>
  
<style>
body {
  background-color: white;
}

.textScroll {
  display: inline-block;
  position: fixed;
  top: 6rem;
  bottom: -10px;
  overflow: scroll;
  right: 0;
  width: 100%;
  margin-bottom: 4.7rem;
  z-index: 1;
}

.textScroll2 {
  display: inline-block;
  position: fixed;
  top: 6rem;
  bottom: -10px;
  overflow: scroll;
  right: 0;
  width: 100%;
  margin-bottom: 4.7rem;
  z-index: 1;
}
</style>
  